<style>
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin"
     style="padding: 10px 10px 10px 10px;">
    <input type="hidden" name="ids" id="ids_img" class="layui-input" value="{$ids ?? ''}">
    <input type="hidden" class="layui-input" id="count" value="{$count ?? ''}">
    <input type="hidden" name="id" class="layui-input"  value="{$id ?? ''}">
    {empty name="image"}
    <div id="contentdiv">
        <div class="layui-form-item">
            <label class="layui-form-label">上传类别</label>
            <div class="layui-input-block">
                <select name="type_id[]" lay-verify="required" class="type_id" placeholder="请输入类别" lay-search="">
                    <option value="">请选择图片类别</option>
                    {foreach $gather_type as $key=>$vo}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/foreach}
                    <option value="-1">新增类别</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo">
                        </div>
                    </blockquote>
                </div>
                <ul class="pic_img" id="slide-pc-priview">
                    <input type="hidden" name="pic_imgs[]" class="layui-input" id="pic_imgs">
                </ul>
            </div>
        </div>
    </div>
    {else /}
    {foreach $image as $k=>$v}
    <div class="layui-form-item">
        <label class="layui-form-label">上传类别</label>
        <div class="layui-input-block">
            <select name="type_id[]" lay-verify="required" placeholder="请输入类别" lay-search="">
                <option value="">请选择图片类别</option>
                {foreach $gather_type as $key=>$vo}
                <option value="{$vo.id}" {if $v.gather_type_id eq $vo.id}selected{/if}>{$vo.name}</option>
                {/foreach}
                <option value="-1">新增类别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
            <div class="layui-upload" id="layui-upload">
                <button type="button" class="layui-btn" id="test_edit{$k}">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" id="kk{$k}" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="layui-upload-list-id">
                        <div id="layer-photos-demo{$k}" data-id="layer-photos-demo{$k}" class="layer-photos-demo">
                            {foreach $v.arr_path as $ke=>$v1}
                            <img src="/storage/{$v1}" layer-src="/storage/{$v1}" class="layui-upload-img"
                                 style="width:184px;height:135px">
                            {/foreach}
                        </div>
                    </div>
                    <input type="hidden" name="pic_imgs[{$k}]" id="path_url{$k}" value="{$v.string_path ?? ''}" class="layui-input">
                </blockquote>
            </div>
        </div>
    </div>
    {/foreach}
    <div id="contentdiv">
        <div class="layui-form-item">
            <label class="layui-form-label">上传类别</label>
            <div class="layui-input-block">
                <select name="type_id[]" class="type_id" placeholder="请输入类别" lay-search="">
                    <option value="">请选择图片类别</option>
                    {foreach $gather_type as $key=>$vo}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/foreach}
                    <option value="-1">新增类别</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo">
                        </div>
                    </blockquote>
                </div>
                <ul class="pic_img" id="slide-pc-priview">
                    <input type="hidden" name="pic_imgs[{$count}]" class="layui-input" id="pic_imgs">
                </ul>
            </div>
        </div>
    </div>
    {/empty}
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <input type="button" class="layui-btn" style="float: right; margin-left: 200px;" value="添加一个" onclick="Add()">
    </div>
</div>
<script src="/static/admin/video/jquery.js"></script>
<script src="/static/admin/layui/layui.js"></script>
<script>
    var count = $('#count').val();
    var sort;
    if (count) {
        sort = parseInt(count) + 1;
    } else {
        sort = 1;
    }
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'form', 'upload', 'laydate'], function () {
        var $ = layui.$, form = layui.form, laydate = layui.laydate, upload = layui.upload;
        var str =  parent.$('#image_ids').val();
        $("#layui-upload-list-id div").each(function () {
            var li_id = $(this).attr("id");

            layer.photos({
                photos: '#' + li_id
                , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
            // id = li_id.replace("li","");
        });

        $("#layui-upload button").each(function () {
            var li_id = $(this).attr("id");
            var new_div = $(this).next('blockquote').children('div').children('div').attr('id'); //找id
            var new_img_url_id = $(this).next('blockquote').children('input').attr('id'); //找id
            var old_string = $('#' + new_img_url_id).val();
            var old_arr =old_string.split(',');
            var new_arr = [];
            upload.render({
                elem: '#' + li_id
                , url: "{:url('query/upload')}" //改成您自己的上传接口
                , multiple: true
                , accept: 'images/*'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        var html = '<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:184px;height:135px">';

                        // html+=' <input type="text" name="pic_img_name" class="layui-input pic_img_name" id="pic_img_name">';
                        $('#' + new_div).append(html);
                    });
                }
                , done: function (res) {
                    old_arr.push(res.data.src);
                    $('#' + new_img_url_id).val(old_arr);
                },
                allDone: function (obj) {
                    layer.msg("执行完毕，文件总数：" + obj.total + "成功：" + obj.successful + "个，失败：" + obj.aborted + "个");
                }
            });
        });

        picupload("#test", "#demo", "#pic_imgs");
        var i = 0, j = 0;
        var multiple_images = [];

        function picupload(id, pic, pic_imgs) {
            upload.render({
                elem: id
                , url: "{:url('query/upload')}" //改成您自己的上传接口
                , multiple: true
                , accept: 'images/*'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        var html = '<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:184px;height:135px">';

                        // html+=' <input type="text" name="pic_img_name" class="layui-input pic_img_name" id="pic_img_name">';
                        $(pic).append(html);
                    });
                }
                , done: function (res) {
                    multiple_images.push(res.data.src);
                    $(pic_imgs).val(multiple_images);
                },
                allDone: function (obj) {
                    layer.msg("执行完毕，文件总数：" + obj.total + "成功：" + obj.successful + "个，失败：" + obj.aborted + "个");
                }
            });
        };
        window.Add = function () {
            var recoder = $("#contentdiv").clone();

            recoder.find(".layui-btn").attr("id", "test" + sort + "");
            recoder.find(".layui-upload-list").attr("id", "demo" + sort + "");
            recoder.find(".type_id").attr("name", "type_id[" + sort + "]");
            recoder.find(".pic_img input").attr("name", "pic_imgs[" + sort + "]");
            recoder.find(".pic_img input").attr("id", "pic_imgs" + sort + "");
            recoder.find(".layui-upload-list").empty();
            recoder.find(".pic_img input").val('');
            $("#layuiadmin-form-admin").append(recoder);
            picupload("#test" + sort + "", "#demo" + sort + "", "#pic_imgs" + sort + "");
            multiple_images = [];
            form.render('select');
            sort++;
        };

    });
</script>